<template>
  <view class="page">
    <view class="distribution-fee-list" v-if="distributionFeeDetail.length > 0">
      <view class="distribution-fee-item" v-for="item in distributionFeeDetail">
        <view class="type-and-amount">
          <view class="type">{{ item.reason }}</view>
          <view class="amount income" v-if="item.income">
            +{{ (item.integralValue * 100).toFixed(2) }}
          </view>
          <view class="amount outcome" v-else>
            -{{ (item.integralValue * 100).toFixed(2) }}
          </view>
        </view>
        <view class="date">{{ item.createdTime }}</view>
      </view>
    </view>
    <empty v-else-if="!loading" height="100vh"></empty>
  </view>
</template>

<script>
import request from "@/utils/request";
import Empty from "@/components/empty.vue";

export default {
  components: { Empty },
  data() {
    return {
      loading: false,
      distributionFeeDetail: [],
    };
  },
  onShow() {
    this.getDistributionFeeDetail();
  },
  methods: {
    //获取佣金明细
    getDistributionFeeDetail() {
			return new Promise((resolve, reject)=>{
				this.loading = true;
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				request({
					url: "/integral/integralFeeDetailPage",
					method: "post",
					data: {
						current: 1,
						size: -1,
					},
				})
					.then((res) => {
						uni.hideLoading();
						this.distributionFeeDetail = res.records;
						resolve(res.records);
					})
					.catch((err) => {
						uni.hideLoading();
						console.log(err, "err");
						uni.showToast({
							title: err,
						});
						reject(err);
					})
					.finally(() => {
						this.loading = false;
					});
			})
    },
  },
	//下拉刷新
	onPullDownRefresh() {
		this.getDistributionFeeDetail().finally(()=>{
			uni.stopPullDownRefresh();
		})
	},
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f6f6f6;
  .distribution-fee-list {
    .distribution-fee-item {
      padding: 28rpx 20rpx;
      border-bottom: 20rpx solid #f6f6f6;
      background: white;
      .type-and-amount {
        font-size: 30rpx;
        color: #333333;
        display: flex;
        justify-content: space-between;
        .type {
        }
        .amount {
          font-weight: 500;
          &.income {
            color: #f6bd00;
          }
        }
      }
      .date {
        margin-top: 6rpx;
        font-size: 28rpx;
        color: #999999;
      }
    }
  }
}
</style>
